<template>
  <div class="footer">
    <div class="foot">
      <div class="bottom-tab">
        <div class="tab-item" @click="switchTo('/home')">
          <img :src="'/home' === $route.path|| '/' === $route.path|| '/home/' === $route.path? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
          <span :class="{footSelect: '/home' === $route.path||'/' === $route.path||'/home/' === $route.path}">首页</span>
        </div>
        <div class="tab-item" @click="tologin('/message')">
          <img :src="'/message' === $route.path ||'/message/list' === $route.path? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="提醒">
          <span :class="{footSelect: '/message' === $route.path||'/message/list' === $route.path}">提醒</span>
          <span class="msg-num" v-if="newMessage"></span>
        </div>
        <div class="tab-item live-box" @click="tologin('/live')">
          <img :src="'/live' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" class="live" alt="直播">
          <img src="" alt="" style="visibility: hidden">
          <span :class="{footSelect: '/live' === $route.path}">直播</span>
        </div>
        <div class="tab-item" @click="tologin('/task')">
          <img :src="'/task' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="任务">
          <span :class="{footSelect: '/task' === $route.path}">任务</span>
        </div>
        <div class="tab-item" @click="switchTo('/my')">
          <img :src="'/my' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="我的">
          <span :class="{footSelect: '/my' === $route.path}">我的</span>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  name: 'MenuCom',
  props: {
    msg: String
  },
  data() {
    return {
      tabBarImgArr: [
        {
          selected: require("@/assets/img/icon_home_focus.png"),
          normal: require("@/assets/img/icon_home.png")
        },
        {
          selected: require("@/assets/img/icon_remind_focus.png"),
          normal: require("@/assets/img/icon_remind.png")
        },
        {
          selected: require("@/assets/img/icon_task_focus.png"),
          normal: require("@/assets/img/icon_task.png")
        },
        {
          selected: require("@/assets/img/icon_mine_focus.png"),
          normal: require("@/assets/img/icon_mine.png")
        },
        {
          selected: require("@/assets/img/icon_live.png"),
          normal: require("@/assets/img/icon_live.png")
        },
      ],
      newMessage:false
    };
  },
  mounted(){

    if(this.getCookie("token")==null||this.getCookie("token")==''){

    }else{
      let data = {
        token: this.getCookie("token")
      }
      this.$api.home.CountMessage(data).then(res=> {
        // 执行某些操作
        let flag = 0
        for( const i of res.data.data){
          flag += i.count
        }

        if(flag>0){
          this.newMessage = true
        }else{
          this.newMessage = false
        }

      })
    }

  },
  watch:{
    "$route":function () {

      if(this.getCookie("token")==null||this.getCookie("token")==''){

      }else{
        let data = {
          token: this.getCookie("token")
        }
        this.$api.home.CountMessage(data).then(res=> {
          // 执行某些操作
          let flag = 0
          for( const i of res.data.data){
            flag += i.count
          }

          if(flag>0){
            this.newMessage = true
          }else{
            this.newMessage = false
          }

        })
      }

    }
  },
  methods:{
    switchTo: function (path) {
      this.$router.push(path)

    }
  }



}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .footer{
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 3rem;
    background: #fff;
    width: 100%;


  }
  .footer .foot{
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 3rem;
    background: #fff;
    width: 100%;

  }
  .bottom-tab{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    /*border-top: 1px solid #D9D9D9;*/
    padding-top: 6px;
    padding-bottom: 6px;
    background: #fff;
    border-top: 1px solid rgba(247,247,247,1);
  }
  .bottom-tab .tab-item{
    flex: 1;
    text-align: center;
    position: relative;
  }
  .bottom-tab .tab-item img{
    display: block;
    width: 1.5rem;
    height: 1.4rem;
    margin: 0 auto;
  }
  .bottom-tab .tab-item span{
    font-size: 12px;
    color: #B3B3B3;
  }
  .bottom-tab .tab-item .live{
    position: absolute;
    top: -1rem;
    width: 2.5rem;
    height: 2.5rem;



  }
  .live-box{
    /*top: -1rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .live-box span{
    display: inline-block;
    width: 100%;
  }
  .footSelect{
    font-size:1.25rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #14A365!important;
  }
  .msg-num{
    position: absolute;
    right: 1.8rem;
    top: -0.3rem;
    width:0.3rem;
    height:0.3rem;
    background:rgba(253,1,0,1);
    border-radius:50%;
    font-size:0.63rem!important;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1)!important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

</style>
